import { Vue, Component, Provide } from 'vue-property-decorator';
import { mytable } from '@/components/mytable';
@Component({
  components: {
    mytable
  }
})
export class ShowModule extends Vue {

  private tableName = '我是prop 属性，我用来传值';
  private choosevalue: boolean = true;
  private myconName: string = '';


  @Provide()
  providenameDefault?: string;

  clickON(n: any) {
    alert(n);
  }

  clickOnEmit(n: any) {
    alert('clickOnEmit' + n);
  }

  clickOnChange(n: any) {
    alert('clickOnChange' + n);
  }

  mounted() {
    let mycontable = this.$refs['mytable'] as mytable;
    this.myconName = mycontable.componentName;
  }
  render() {
    return (
      <div>
        <el-row>
          <el-col span={2}> tableName :</el-col><el-col span={20}> <el-input v-model={this.tableName} placeholder="请输入内容"></el-input></el-col>
        </el-row>
        <p>
          组件名称：{this.myconName}
        </p>

        <mytable ref='mytable' tableName={this.tableName} choosevalue={this.choosevalue} on-reset={this.clickON}
          on-emitTodoReset={this.clickOnEmit}
          on-emit-change={this.clickOnChange}>
          <template slot='header'>
            <p>我是一个插槽，特码的注意子组件的写法 this.$slots</p>
          </template>
        </mytable>

      </div>
    )
  }

}